<template>
  <div class="find-item">
    <div class="content">
      <div class="title">
        <p class="shop-name">麻辣火锅(广州店)</p>
        <span>领优惠</span>
      </div>
      <div class="des">
        <span>起送价￥100</span>
        <span>配送费￥5</span>
        <span>40分钟送达</span>
      </div>
      <div class="cx">
        <span class="cx-icon">促销</span>
        <span>满100减20 满300减50</span>
      </div>
      <!-- 轮播图 -->
      <div class="swiper-box">
        <swiper ref="mySwiper" class="my-swiper" :options="swiperOptions">
          <swiper-slide class="swiper-item">Slide 1</swiper-slide>
          <swiper-slide class="swiper-item">Slide 2</swiper-slide>
          <swiper-slide class="swiper-item">Slide 3</swiper-slide>
          <swiper-slide class="swiper-item">Slide 4</swiper-slide>
          <swiper-slide class="swiper-item">Slide 5</swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 3,
        spaceBetween: 10,
        freeMode: true,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.find-item {
  width: 9.333333rem;
  height: 6.066667rem;
  margin: 0 auto;
  margin-top: 0.213333rem;
  border-radius: 0.133333rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.266667rem 0.133333rem;
  .content {
    padding: 0 0.24rem;
    .title {
      display: flex;
      justify-content: span;
      align-items: center;
      .shop-name {
        font-size: 0.453333rem;
        font-weight: bold;
        flex: 1;
      }
      span {
        padding: 0.08rem 0.2rem;
        border-radius: 0.2rem;
        border: 1px solid #ff9966;
        color: #f94e4e;
      }
    }
    .des {
      color: #999;
      font-size: 0.373333rem;
      margin-top: 0.16rem;
      span {
        padding-right: 0.16rem;
        margin-right: 0.16rem;
        position: relative;
        &:last-child::after {
          content: "";
          display: none;
        }
        &::after {
          content: "";
          display: block;
          width: 1px;
          height: 100%;
          background-color: #999;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
    }
    .cx {
      margin-top: 0.213333rem;
      .cx-icon {
        line-height: 0.533333rem;
        background-color: #fff6ee;
        font-size: 0.373333rem;
        color: #ffa45b;
        text-align: center;
        border-radius: 0.066667rem;
        margin-right: 0.266667rem;
        display: inline-block;
        vertical-align: middle;
        padding: 0.066667rem 0.133333rem;
      }
    }
    .swiper-box {
      width: 100%;
      margin-top: 0.506667rem;
      .my-swiper {
        height: 100%;
        .swiper-item {
          width: 3.333333rem;
          height: 2.666667rem;
          line-height: 2.666667rem;
          text-align: center;
          font-size: 0.48rem;
          background-color: pink;
          border-radius: 0.266667rem;
          overflow: hidden;
        }
      }
    }
  }
}
</style>